<template>
  <div>
    <h2 id="top_title">基本信息</h2>
    <div id="topbar"></div>
    <div id="msg">
      <el-form
        :inline="true"
        :model="person"
        label-position="right"
        label-width="200px"
        id="person_msg"
        class="demo-form-inline"
      >
        <el-form-item label="员工姓名" required class="item">
          <el-input class="input" v-model="person.name" disabled></el-input>
        </el-form-item>
        <el-form-item required label="入职日期" class="item">
          <el-date-picker
            v-model="person.entryDate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-form
        :inline="true"
        :model="person"
        label-position="right"
        label-width="200px"
        id="person_msg"
        class="demo-form-inline"
      >
        <el-form-item label="所在部门" required class="item">
          <el-select
            style="width: 300px"
            v-model="person.deptName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in deptList"
              :key="item.name"
              :label="item.name"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item required label="联系方式" class="item">
          <el-input class="input" v-model="person.mobile"></el-input>
        </el-form-item>
      </el-form>
      <el-form
        :inline="true"
        :model="person"
        label-position="right"
        label-width="200px"
        id="person_msg"
        class="demo-form-inline"
      >
        <el-form-item label="所在职位" required class="item">
          <el-select
            style="width: 300px"
            v-model="person.userType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in ocupation"
              :key="item.key"
              :label="item.key"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item required label="最高学历" class="item">
          <el-select
            style="width: 300px"
            v-model="person.education"
            placeholder="请选择"
          >
            <el-option
              v-for="item in educations"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form
        :inline="true"
        :model="person"
        label-position="right"
        label-width="200px"
        id="person_msg"
        style="margin-top: 40px"
        class="demo-form-inline"
      >
        <el-form-item label="员工性别" required class="item">
          <el-radio-group v-model="person.gender" style="width: 300px">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
            <el-radio :label="3">未知</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="margin-left: 500px; margin-top: 30px">
        <el-button
          type="warning"
          style="width: 200px; height: 50px; font-size: 20px"
          round
          >提交</el-button
        >
        <el-button
          @click="back()"
          style="width: 200px; height: 50px; font-size: 20px; margin-left: 80px"
          round
          >返回</el-button
        >
      </div>
      <el-upload
      id="userimage"
      
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
     
    </div>
    <div id="bottombar"></div>
  </div>
</template>
<script>
import api from "@/api/userdoc";
import deptApi from "@/api/department";
export default {
  data() {
    return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
      contentVisitable: false,
      educations: ["大专以下", "大专", "本科", "研究生", "博士生"],
      ocupation: [
        {
          key: "普通员工",
          value: 0,
        },
        {
          key: "hr",
          value: "3",
        },
        {
          key: "部门经理",
          value: 4,
        },
      ],
      options: [
        {
          value: 0,
          label: "普通员工",
        },
        {
          value: 3,
          label: "hr",
        },
        {
          value: 4,
          label: "部门经理",
        },
      ],
      deptList: [],
      form: {
        userId: "0",
        name: "",
        age: "",
        deptName: "",
        mobile: "",
        identityCard: "", //身份证
        education: "",
        entryDate: "", //入职日期
        leaveDate: "", //离职日期
        userType: "", //员工职位
        createTime: "", //合同创建日期
        url:
          "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4228190748,3790692394&fm=26&gp=0.jpg",
      },
      person: {},
    };
  },
  methods: {
    getInfo() {
      let that = this;
      api
        .getinfo(this.form.userId)
        .then((response) => {
          this.person = response.doc;
          if (this.person.userType == 0) {
            this.person.userType = "普通员工";
          } else if (this.person.userType == 3) {
            this.person.userType = "hr";
          } else if (this.person.userType == 4) {
            this.person.userType = "部门经理";
          }
        })
        .catch((err) => console.log(err));
      deptApi.getDeptList().then((response) => {
        let list = response.list;
        for (let index = 0; index < list.length; index++) {
          const element = list[index];
          if (element.parentId != 0) {
            this.deptList.push(element);
          }
        }
      });
    },
    back() {
      this.$router.push({ path: "/employee/index" });
    },
       handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
  },
  created() {
    this.form.userId = this.$route.query.id;
    this.getInfo();
  },
};
</script>
<style  >
#top_title {
  position: absolute;
  top: 180px;
  left: 150px;
  text-decoration: underline rgb(121, 160, 241) 5px;
}
#msg {
  position: absolute;
  top: 300px;
  left: 70px;
}
.rightInput {
  margin-left: 80px;
}
#photo {
  position: absolute;
  left: 1000px;
  top: -80px;
}
#topbar {
  width: 95%;
  height: 8%;
  background-color: skyblue;
  position: absolute;
  left: 2.5%;
  top: 100px;
}
#bottombar {
  width: 95%;
  height: 8%;
  background-color: skyblue;
  position: absolute;
  bottom: 50px;
  left: 2.5%;
}
.item .el-form-item__label {
  font-size: 20px;
}
#person_msg {
  margin-left: 100px;
  margin-top: 0;
}
.input {
  width: 300px;
  height: 80px;
}
#userimage{
  position: absolute;
  left: 1200px;
  top: 0; 
}
</style>
